v-bind 動態屬性

可將屬性綁定於 class，並將資料傳遞到元素上，屬性若是有更動，所綁定 class 也會一起更動。

：是 v-bind 的縮寫，我們很常會在 Vue 的資料綁定上看不到 v-bind，而是看到底下的例子：

<!-- 綁定屬性範例 -->
<img :src="imageSrc" />

<!-- 等同於底下這個範例 -->
<img v-bind:src="imageSrc" />

同時，v-bind 有多種綁定方式，這在官方有清楚的說明：

<!-- 動態屬性名 -->
<button :[key]="value"></button>

<!-- 內聯字符串拼接 -->
<img :src="'/path/to/images/' + fileName" />

<!-- class 綁定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]"></div>

<!-- style 綁定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>

<!-- 綁定對象形式的屬性 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

神奇的是 v-bind 也同樣可以綁定樣式，綁定樣式示範如下。

<!-- index.html -->
<div id="app">
  <div 
		class="box" 
		:class="{rotate: isTransform}">
	</div>
  <button 
		class="btn btn-outline-primary" 
		v-on:click="isTransform = !isTransform">
			選轉物件
	</button>
</div>

/* style.css */
.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: all .5s;
}

.box.rotate {
  transform: rotate(45deg)
}

// all.js
const app = {
  data() {
    return {
      isTransform: false,
    }
  }
}

Vue.createApp(app).mount('#app')

{rotate: isTransform} 中 rotate 為 class 的名稱，isTransform 在 js 中做判斷，當結果為 true，則動態切換啟動 rotate 樣式。

當需要做父層與子層間資料的傳遞時，同樣也會使用到 v-bind，但此時就需要 props 綁定，props 必須在子層中被定義，綁定才有效。

<!-- prop 綁定。"prop" 必須在子層中已定義。 -->
<MyComponent :prop="someThing" />

<!-- 傳遞子父層共有的 prop -->
<MyComponent v-bind="$props" />

以上大略的給 v-bind 做了點介紹，我們接著今天的簡易小任務。

➔
任務：
請操作 這個模板，執行以下要求 ( 只能操作 HTML 的部分 )：

請將 data 資料中的 imgUrl 綁定到 input 標籤的 value、img 標籤的 src ; 將 imgAlt 綁定到 img 標籤的 alt 上。

解答：

<div id="app">
  <div class="container p-3">
    <div class="inputWrap mb-3">
      <input type="text" :value="imgUrl" class="imgInput mb-3">
      <img :src="imgUrl" :alt="imgAlt">
    </div>
  </div>
</div>

const app = {
  data() {
    return {
      imgUrl: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80',
      imgAlt: '這是海洋'
    }
  }
}
Vue.createApp(app).mount('#app')

參考資料：
Vue 官方